
    document.addEventListener('DOMContentLoaded', () => {
        const latestRecipes = document.getElementById('latest-recipes');
        const hotRecipes = document.getElementById('hot-recipes');
        const recommendedRecipes = document.getElementById('recommended-recipes');

        // Sample data (replace with actual data from your backend)
        if(recipes.length<=0){
            recipes.push(
                //{ id: 1, name: '红烧肉', description: '经典美味的红烧肉', image: 'https://source.unsplash.com/300x200/?pork' },
                 { id: 2, name: '宫保鸡丁', description: '香辣可口的宫保鸡丁', image: 'chushi/img/favicon.ico' },
                 { id: 3, name: '麻婆豆腐', description: '麻辣鲜香的麻婆豆腐', image: 'chushi/img/favicon.ico' },
                 { id: 4, name: '糖醋里脊', description: '酸甜可口的糖醋里脊', image: 'chushi/img/favicon.ico' },
            //     { id: 5, name: '水煮鱼', description: '鲜嫩美味的水煮鱼', image: 'https://source.unsplash.com/300x200/?fish' },
            //     { id: 6, name: '青椒肉丝', description: '清脆爽口的青椒肉丝', image: 'https://source.unsplash.com/300x200/?pepper-beef' },
            )
        }


        // Render latest and hot recipes
        function renderRecipeList(container, recipes) {
            recipes.forEach(recipe => {
                const recipeItem = document.createElement('div');
                recipeItem.className = 'recipe-item';
                recipeItem.innerHTML = `
                        <img src="${recipe.image}" alt="${recipe.name}">
                        <div class="recipe-item-content">
                            <h4>${recipe.name}</h4>
                            <p>${recipe.description}</p>
                        </div>
                        <svg class="star-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                        </svg>
                    `;
                recipeItem.addEventListener('click', function() {
                    // 跳转到菜谱类型的详情页面，并传递菜谱类型ID
                    window.location.href = `Recipe?recipe_name=${recipe.name}&recipe_id=${recipe.id}`;
                });
                container.appendChild(recipeItem);
            });
        }

        // Render recommended recipes
        function renderRecommendedRecipes(container, recipes) {
            recipes.forEach(recipe => {
                const recipeCard = document.createElement('div');
                recipeCard.className = 'recipe-card';
                recipeCard.innerHTML = `
                        <img src="${recipe.image}" alt="${recipe.name}">
                        <div class="recipe-card-content">
                            <h4>${recipe.name}</h4>
                            <p>${recipe.description}</p>
                        </div>
                    `;
                recipeCard.addEventListener('click', function() {
                    // 跳转到菜谱类型的详情页面，并传递菜谱类型ID
                    window.location.href = `Recipe?recipe_name=${recipe.name}&recipe_id=${recipe.id}`;
                });
                container.appendChild(recipeCard);
            });
        }

        renderRecipeList(latestRecipes, recipes.slice(0, 6));
        renderRecipeList(hotRecipes, recipes.slice(0, 6));
        renderRecommendedRecipes(recommendedRecipes, recipes);

        // Add interactivity to star icons
        document.querySelectorAll('.star-icon').forEach(star => {
            star.addEventListener('click', () => {
                star.classList.toggle('active');
                if (star.classList.contains('active')) {
                    star.style.fill = '#ffc107';
                    star.style.stroke = '#ffc107';
                } else {
                    star.style.fill = 'none';
                    star.style.stroke = 'currentColor';
                }
            });
        });

        // Add pagination functionality
        const prevBtn = document.querySelector('.prev-btn');
        const nextBtn = document.querySelector('.next-btn');
        let currentPage = 0;
        const recipesPerPage = 4;

        function updateRecommendedRecipes() {
            const start = currentPage * recipesPerPage;
            const end = start + recipesPerPage;
            const pageRecipes = recipes.slice(start, end);
            recommendedRecipes.innerHTML = '';
            renderRecommendedRecipes(recommendedRecipes, pageRecipes);
        }

        prevBtn.addEventListener('click', () => {
            if (currentPage > 0) {
                currentPage--;
                updateRecommendedRecipes();
            }
        });

        nextBtn.addEventListener('click', () => {
            if ((currentPage + 1) * recipesPerPage < recipes.length) {
                currentPage++;
                updateRecommendedRecipes();
            }
        });

        updateRecommendedRecipes();

        //Search
        // Header search functionality
        const headerSearch = document.getElementById('header-search');
        const headerSearchBtn = document.getElementById('header-search-btn');
        //重定型到select类并且返回文本框内容“query”
        function performSearch() {
            const searchTerm = headerSearch.value.trim();
            if (searchTerm) {
                const searchUrl = `Select?keyword=${encodeURIComponent(searchTerm)}&style=3`;
                window.location.href = searchUrl;
            }
        }

        headerSearchBtn.addEventListener('click', performSearch);
        headerSearch.addEventListener('keyup', (e) => {
            if (e.key === 'Enter') {
                performSearch();
            }
        });

        headerSearchBtn.addEventListener('click', performSearch);
        headerSearch.addEventListener('keyup', (e) => {
            if (e.key === 'Enter') {
                performSearch();
            }
        });

        // Body search functionality
        const bodySearch = document.getElementById('body-search');
        const bodySearchBtn = document.getElementById('body-search-btn');
        //重定型到select类并且返回文本框内容“query”
        function bodyperformSearch() {
            const searchTerm = bodySearch.value.trim();
            if (searchTerm) {
                const searchUrl = `Select?keyword=${encodeURIComponent(searchTerm)}&style=3`;
                window.location.href = searchUrl;
            }
        }

        bodySearchBtn.addEventListener('click', bodyperformSearch);
        bodySearch.addEventListener('keyup', (e) => {
            if (e.key === 'Enter') {
                bodyperformSearch();
            }
        });

        bodySearchBtn.addEventListener('click', bodyperformSearch);
        bodySearch.addEventListener('keyup', (e) => {
            if (e.key === 'Enter') {
                bodyperformSearch();
            }
        });

    });

        document.addEventListener('DOMContentLoaded', function() {
        document.body.addEventListener('click', function(event) {
            if (event.target.classList.contains('login-up')) {
                // 登录按钮点击后要执行的代码
                // alert('登录按钮被点击了！');
                window.location.href = 'Login';
            }else if(event.target.classList.contains('primary')){
                window.location.href='Hot';
            }else if (event.target.classList.contains('secondary')){
                window.location.href="New"
            }
            else if (event.target.classList.contains('publish-btn')){
                window.location.href="Insert"
            }
        });
    });
	document.addEventListener('DOMContentLoaded', function() {
	    // 获取.user-icon元素
	    var userIcon = document.querySelector('.user-icon');
	    // 获取.Loginlist元素
	    var loginList = document.querySelector('.Loginlist');
	
	    // 为.user-icon添加点击事件监听器
	    userIcon.addEventListener('click', function() {
	        // 检查.loginList当前是否显示
	        if (loginList.style.display === 'none') {
	            // 如果是隐藏的，则显示它
	            loginList.style.display = 'block';
	        } else {
	            // 如果是显示的，则隐藏它
	            loginList.style.display = 'none';
	        }
	    });
	});

	

